<template>
    <j-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" v-drag-modal
        :okButtonProps="{ props: { disabled: disableSubmit } }" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"
        okText="确定">
        <a-spin :spinning="confirmLoading">
            <a-row>
                <a-col :md="8">
                    <a-button v-if="!disableSubmit" type="primary" @click="handleShowChannel">添加</a-button>
                    <a-button v-if="!disableSubmit" type="danger" @click="deleteData" style="margin-left: 18px;"
                        :disabled="selectedRowKeys.length == 0">删除</a-button>
                </a-col>
            </a-row>
            <a-divider />

            <a-table :row-selection="{ selectedRowKeys, onChange: onSelectChange }" :pagination="false"
                :columns="columns" rowKey="storeId" :data-source="sourceData" size="small" :scroll="{ y: 400 }">
                <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                    style="padding: 8px">
                    <a-input v-ant-ref="c => (searchInput = c)" placeholder="搜索经销商名称" :value="selectedKeys[0]"
                        style="width: 188px; margin-bottom: 8px; display: block;"
                        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                        @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex,clearFilters)" />
                    <a-button type="primary" icon="search" size="small" style="width: 90px; margin-right: 8px"
                        @click="handleSearch(selectedKeys, confirm, column.dataIndex,clearFilters)">
                        搜索
                    </a-button>
                    <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
                        重置
                    </a-button>
                </div>
                <a href="javascript:;" slot="filterIcon" slot-scope="filtered"
                    :style="{ color: filtered ? '#108ee9' : undefined, background: 'transparent', marginTop: '8px', marginRight: '7px', fontSize: '13px' }">
                    搜索 </a>
            </a-table>
            <a-button type="link">共{{ sourceData.length }}条</a-button>
        </a-spin>
        <sys-msgNoticeChannel-modal v-if="!disableSubmit" ref="sysMsgNoticeChannelModalRef"
            @selectFinished="selectFinished" :sourceData="sourceData" />

    </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import sysMsgNoticeChannelModal from './SysMsgNoticeChannelModal.vue';


export default {
    name: "SysMsgNoticeModal",
    data() {
        return {
            title:'授权',
            visible: false,
            model: {},
            confirmLoading: false,
            disableSubmit: false,
            url: {
                edit: "/system/sysUserStore/edit",
                queryById: '/system/sysUserStore/queryById',
            },
            selectedRowKeys: [],
            sourceData: [],
            columns: [
                {
                    title: '渠道编码',
                    align: 'center',
                    dataIndex: 'channelId',
                    width: 80
                },
                {
                    title: '渠道名称',
                    align: 'center',
                    dataIndex: 'channelName',
                    width: 100,
                },
                {
                    title: '经销商编号',
                    align: 'center',
                    dataIndex: 'storeCode',
                    width: 150
                },
                {
                    title: '经销商名称',
                    align: 'center',
                    dataIndex: 'storeName',
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) =>
                        record.storeName
                            .toString()
                            .toLowerCase()
                            .includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                            setTimeout(() => {
                                this.searchInput.focus();
                            }, 0);
                        }
                    },
                },
            ],
            searchName: '',
            clearReset:null,
            choosePartnerId:null
        }
    },

    methods: {
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        // 选择渠道
        handleShowChannel() {
            this.$refs.sysMsgNoticeChannelModalRef.open(this.choosePartnerId);
        },
        // 新增
        add() {
            this.edit({});
        },
        //编辑
        edit(record,partnerId) {
            this.visible = true;
            this.selectedRowKeys = [];
            this.sourceData = [];
            this.$nextTick(() => {
                this.model = Object.assign({}, record);
                this.$refs.sysMsgNoticeChannelModalRef.clear();
                this.choosePartnerId = partnerId
            })
            if (!record.id) { return }
            // 获取明细数据
            getAction(this.url.queryById, { id: record.id,partnerId }).then((res) => {
                if (res.success) {
                    const det = res.result;
                    this.model = det;
                    this.$nextTick(() => {
                        this.sourceData = det.storeInfoList
                        this.clearReset && this.clearReset()
                    });
                }
            })
        },
        // 选择的数据
        selectFinished(selectRows) {
            if (!this.sourceData.length) {
                this.sourceData = selectRows
                return;
            }
            selectRows.forEach(x => {
                const index = this.sourceData.findIndex(item => item.storeId == x.storeId)
                if (index < 0) {
                    console.log(x);
                    this.sourceData.push(x)
                }
            })
        },
        // 删除数据
        deleteData() {
            if (!this.selectedRowKeys.length) {
                return
            }
            this.selectedRowKeys.forEach(x => {
                const index = this.sourceData.findIndex(y => y.storeId == x);
                index >= 0 && this.sourceData.splice(index, 1);
            })
            this.selectedRowKeys = []
        },
        close() {
            this.$emit('close');
            this.visible = false;
        },
        handleOk() {
            if (!this.sourceData.length) {
                that.$message.warning('请选择渠道');
                return;
            }
            this.confirmLoading = true;
            let formData = {
                ...this.model,
                salemanId: this.model.salemanId,
                salemanName: this.model.salemanName,
                partnerId: this.choosePartnerId,
                storeInfoList: this.sourceData,
            }

            console.log(formData)
            httpAction(this.url.edit, formData, 'put').then((res) => {
                this.confirmLoading = false;
                if (res.success) {
                    this.$message.success(res.message);
                    // this.$emit('ok');
                    this.visible = false;
                } else {
                    this.$message.warning(res.message);
                }
            }).finally(() => {
                this.confirmLoading = false;
                this.close();
            })
        },
        handleCancel() {
            this.close()
        },
        handleSearch(selectedKeys, confirm, dataIndex,clearFilters) {
            confirm();
            this.searchText = selectedKeys[0];
            this.searchedColumn = dataIndex;
            this.clearReset = clearFilters
        },
        handleReset(clearFilters) {
            clearFilters();
            this.searchText = '';
        },

    },
    components: {
        sysMsgNoticeChannelModal
    }
}
</script>

<style lang="less" scoped></style>